<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>智慧小区系统</title>
    <%--    <link rel="stylesheet" href="http://www.sucai8.cn/jquery/bootstrap-4.2.1.css">
        <link rel="stylesheet" href="http://www.sucai8.cn/jquery/font-awesome.4.7.0.css">--%>
    <link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://s2.pstatp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath }/statics/css/style.css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/statics/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath }/statics/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript">
        if (window != top)
            top.location.href = location.href;
    </script>
    <style>
        body {
            width: 100%;
            height: 100vh;
            background-color: #000;
            background-image: radial-gradient(circle at top right, rgba(121, 68, 154, 0.13), transparent),
            radial-gradient(circle at 20% 80%, rgba(41, 196, 255, 0.13), transparent);
            overflow: hidden
        }

        canvas {
            position: fixed;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<canvas></canvas>
<div class="container">
    <div class="row full-height justify-content-center">
        <div class="col-12 text-center align-self-center py-5">
            <div class="section pb-5 pt-5 pt-sm-2 text-center">
                <input class="checkbox" type="checkbox" id="reg-log" name="reg-log">
                <div class="card-3d-wrap mx-auto">
                    <div class="card-3d-wrapper bgk">
                        <div class="card-front">
                            <div class="center-wrap">
                                <div class="section text-center">
                                    <h3 class="mb-4 pb-3">智慧小区系统</h3><%=request.getLocalPort()%>
                                    <form method="post" action="dologin">
                                        <div class="form-group">
                                            <input class="form-style" placeholder="请输入用户名" id="account2" name="account"
                                                   autocomplete="off">
                                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="password" class="form-style" placeholder="请输入密码" id="password2"
                                                   name="password" autocomplete="off">
                                            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                        </div>
                                        <div id="msg" align="center" style="margin-top: 15px"><span
                                                style="color: red">${message }</span></div>
                                        <input value="登录" class="btn mt-4" type="submit" style="width:25%;"
                                               type="submit">
                                    </form>
                                    <div class="d-flex justify-content-between mt-4 text-left">
                                        <div class="flex-fill">
                                            <p>没有帐号？<label for="reg-log">立即注册</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-back">
                            <div class="center-wrap">
                                <div class="section text-center">
                                    <form method="post" style="padding-top:30px;" class="layui-form">
                                        <div class="form-group">
                                            <input type="text" name="account" class="form-style" lay-verify="required"
                                                   placeholder="请输入用户名" id="account" autocomplete="off">
                                            <i class="fa fa-user-circle-o" aria-hidden="true"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="email" name="email" class="form-style" lay-verify="required"
                                                   placeholder="请输入电子邮箱" id="email" autocomplete="off">
                                            <i class="fa fa-envelope" aria-hidden="true"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="password" name="password" lay-verify="required"
                                                   class="form-style" placeholder="请输入密码" id="password"
                                                   autocomplete="off">
                                            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                                        </div>
                                        <div class="form-group mt-2">
                                            <input type="text" name="adr" class="form-style" lay-verify="required"
                                                   placeholder="请输入验证码" id="adr" autocomplete="off">
                                            <i class="fa fa-mobile" aria-hidden="true"></i>
                                        </div>
                                        <input value="点击获取验证码" style="width:45%;" class="btn mt-4" readonly="readonly"
                                               id="second">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                        <input value="注册" lay-submit lay-filter="login" style="width:25%;"
                                               class="btn mt-4">
                                    </form>
                                    <p class="mb-0 mt-4 text-center">已有帐号？<label for="reg-log">立即登录</label></p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script layout:fragment="js">
    $('#second').click(function () {
        email();
    });
    var admin;  //储存验证码

    setInterval(function () {
        $("#msg span").text("")
    }, 5000)


    layui.use(['form'],
        function () {
            $ = layui.jquery;
            var form = layui.form(),
                layer = layui.layer;
            form.on('submit(login)', function (data) {
                var data = data.field;
                var adr = $("#adr").val();
                if (adr == admin) {
                    $.ajax({
                        type: "post",
                        url: "/account",
                        data: data,
                        dataType: "json",
                        success: function (data) {
                            if (data == true) {
                                if (confirm("注册成功!")) {
                                    window.location.href = "/login2";
                                }
                            } else {
                                alert("注册失败!");
                            }
                        }
                    })
                } else {
                    alert("验证码输入错误!");
                }
                return false;
            });
        });

    function liusi(yzm) {
        $.ajax({
            type: "GET",
            url: "/register",
            data: {yzm: yzm},
            async: false,
            dataType: "json",
            success: function (data) {
                setInterval(function () {
                    console.log(admin)
                    if (data == 0) {
                        $("#second").prop('disabled', false);
                        $("#second").val("重新获取验证码");
                        data = 0;//计时器初始化;
                        admin = undefined;
                        return
                    } else {
                        $("#second").attr('disabled', true);
                        $("#second").val("(" + data + ")s后重新发送");
                        data--;
                    }
                }, 1000); //每1000毫秒执行一次
            },
            error: function () {
                alert("异常!");
            }
        });
    }

    function email() {
        var email = $("#email").val();
        $.ajax({
            type: "GET",
            url: "/email",
            data: {
                "email": email
            },
            dataType: "json",
            success: function (data,) {
                admin = eval("(" + data + ")");
                liusi(data)
            },
            error: function () {
                alert("操作错误!");
            }
        });
    }
</script>
<script>
    const STAR_COUNT = (window.innerWidth + window.innerHeight) / 8,
        STAR_SIZE = 3,
        STAR_MIN_SCALE = 0.2,
        OVERFLOW_THRESHOLD = 50;
    const canvas = document.querySelector('canvas'),
        context = canvas.getContext('2d');

    let scale = 1, // device pixel ratio
        width,
        height;

    let stars = [];

    let pointerX,
        pointerY;

    let velocity = {x: 0, y: 0, tx: 0, ty: 0, z: 0.0005};

    let touchInput = false;

    generate();
    resize();
    step();

    window.onresize = resize;
    canvas.onmousemove = onMouseMove;
    canvas.ontouchmove = onTouchMove;
    canvas.ontouchend = onMouseLeave;
    document.onmouseleave = onMouseLeave;

    function generate() {

        for (let i = 0; i < STAR_COUNT; i++) {
            stars.push({
                x: 0,
                y: 0,
                z: STAR_MIN_SCALE + Math.random() * (1 - STAR_MIN_SCALE)
            });
        }

    }

    function placeStar(star) {

        star.x = Math.random() * width;
        star.y = Math.random() * height;

    }

    function recycleStar(star) {

        let direction = 'z';

        let vx = Math.abs(velocity.x),
            vy = Math.abs(velocity.y);

        if (vx > 1 || vy > 1) {
            let axis;

            if (vx > vy) {
                axis = Math.random() < vx / (vx + vy) ? 'h' : 'v';
            }
            else {
                axis = Math.random() < vy / (vx + vy) ? 'v' : 'h';
            }

            if (axis === 'h') {
                direction = velocity.x > 0 ? 'l' : 'r';
            }
            else {
                direction = velocity.y > 0 ? 't' : 'b';
            }
        }

        star.z = STAR_MIN_SCALE + Math.random() * (1 - STAR_MIN_SCALE);

        if (direction === 'z') {
            star.z = 0.1;
            star.x = Math.random() * width;
            star.y = Math.random() * height;
        }
        else if (direction === 'l') {
            star.x = -OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if (direction === 'r') {
            star.x = width + OVERFLOW_THRESHOLD;
            star.y = height * Math.random();
        }
        else if (direction === 't') {
            star.x = width * Math.random();
            star.y = -OVERFLOW_THRESHOLD;
        }
        else if (direction === 'b') {
            star.x = width * Math.random();
            star.y = height + OVERFLOW_THRESHOLD;
        }

    }

    function resize() {

        scale = window.devicePixelRatio || 1;

        width = window.innerWidth * scale;
        height = window.innerHeight * scale;

        canvas.width = width;
        canvas.height = height;

        stars.forEach(placeStar);

    }

    function step() {

        context.clearRect(0, 0, width, height);

        update();
        render();

        requestAnimationFrame(step);

    }

    function update() {
        velocity.tx *= 0.96;
        velocity.ty *= 0.96;
        velocity.x += (velocity.tx - velocity.x) * 0.8;
        velocity.y += (velocity.ty - velocity.y) * 0.8;
        stars.forEach((star) => {
            star.x += velocity.x * star.z;
            star.y += velocity.y * star.z;

            star.x += (star.x - width / 2) * velocity.z * star.z;
            star.y += (star.y - height / 2) * velocity.z * star.z;
            star.z += velocity.z;

            // recycle when out of bounds
            if (star.x < -OVERFLOW_THRESHOLD || star.x > width + OVERFLOW_THRESHOLD || star.y < -OVERFLOW_THRESHOLD || star.y > height + OVERFLOW_THRESHOLD) {
                recycleStar(star);
            }
        });
    }

    function render() {
        stars.forEach((star) => {
            context.beginPath();
            context.lineCap = 'round';
            context.lineWidth = STAR_SIZE * star.z * scale;
            context.strokeStyle = 'rgba(255,255,255,' + (0.5 + 0.5 * Math.random()) + ')';

            context.beginPath();
            context.moveTo(star.x, star.y);

            var tailX = velocity.x * 2,
                tailY = velocity.y * 2;

            // stroke() wont work on an invisible line
            if (Math.abs(tailX) < 0.1) tailX = 0.5;
            if (Math.abs(tailY) < 0.1) tailY = 0.5;

            context.lineTo(star.x + tailX, star.y + tailY);

            context.stroke();

        });
    }

    function movePointer(x, y) {

        if (typeof pointerX === 'number' && typeof pointerY === 'number') {
            let ox = x - pointerX,
                oy = y - pointerY;
            velocity.tx = velocity.tx + (ox / 8 * scale) * (touchInput ? 1 : -1);
            velocity.ty = velocity.ty + (oy / 8 * scale) * (touchInput ? 1 : -1);
        }
        pointerX = x;
        pointerY = y;
    }

    function onMouseMove(event) {
        touchInput = false;
        movePointer(event.clientX, event.clientY);
    }

    function onTouchMove(event) {
        touchInput = true;
        movePointer(event.touches[0].clientX, event.touches[0].clientY, true);
        event.preventDefault();

    }

    function onMouseLeave() {
        pointerX = null;
        pointerY = null;
    }
</script>
</body>
</html>